<template>
  <div class="FileUpload">
    <el-upload ref="upload" :accept="acceptType" :disabled="IsUpload" class="upload-demo" action="" :file-list="fileList" :before-upload="handleSubmit">
      <el-button slot="trigger" type="primary" :disabled="IsUpload">{{ IsUpload ? '上传中' : '上传' }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ message }}</div>
    </el-upload>
    <el-progress v-if="IsUpload" class="upload_group" :text-inside="true" :stroke-width="26" :percentage="percentage" />
  </div>
</template>
<script>
import { upApk } from '@/utils/obs'
export default {
  name: 'ApkUpload',
  props: {
    message: {
      type: String,
      default: () => '只能上传APK文件或IPA文件,上传完毕请联系运维更新CDN'
    },
    path: {
      type: String,
      default: () => 'pkg/apk/JJYP_release.apk'
    },
    acceptType: {
      type: String,
      default: () => '.apk,.ipa'
    }
  },
  data() {
    return {
      percentage: 0,
      IsUpload: false,
      drawer: false,
      fileList: [],
      newfileList: [],
      beforeUploadList: []
    }
  },
  computed: {
    btnstatus: function() {
      if (this.newfileList && this.newfileList.length) {
        return this.IsUpload || false
      } else {
        return this.IsUpload || true
      }
    }
  },
  methods: {
    handleSubmit(file) {
      this.addFile(file)
      return false
    },
    async addFile(file) {
      const that = this
      this.IsUpload = true
      const PATH = this.path
      upApk(PATH, file, function(transferredAmount, totalAmount, totalSeconds) {
        that.percentage = parseInt((transferredAmount * 100) / totalAmount)
      }).then(res => {
        this.IsUpload = false
        this.percentage = 0
        // this.$emit('success', { url: res.url })
        this.$message({
          message: '包上传成功！地址为' + res.url,
          type: 'success'
        })
      })
    },
    // 上传前校验
    Beforeupload(file) {
      const isAPK = file.type === 'application/vnd.android.package-archive'
      console.log('type=', file.type)
      if (!isAPK) {
        this.$message.error(`上传文件只能是${this.acceptType}格式!`)
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.upload_group {
  margin-bottom: 10px;
}
/deep/ .imageselect-drawer {
  .el-drawer__header {
    margin-bottom: 0;
  }
  .el-drawer__body {
    padding: 0 20px;
    .imagesee {
      height: 250px;
      overflow: scroll;
    }
    footer {
      text-align: end;
      margin-right: 20px;
    }
    .imagebox {
      position: relative;
    }
    .no {
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #333333d6;
      width: 100%;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bolder;
    }
  }
}
</style>
